import { useNavigate } from '@tanstack/react-router'
import { GithubIcon } from 'lucide-react'
import * as React from 'react'
import { Button } from 'v1-components'
import type { ISearchInput } from '../../../shared/types'

interface IV1NavigationMenuProps {
  currentSearchInput?: ISearchInput
}

export function V1NavigationMenu(props: IV1NavigationMenuProps) {
  const navigate = useNavigate()
  const { currentSearchInput } = props

  return (
    <nav className="h-16 flex-grow-0 w-full flex shadow-md justify-between items-center">
      <button className="cursor-pointer text-2xl font-mono font-bold flex-grow-0 flex-shrink-0 px-4 w-[320px]" onClick={() => navigate({ to: '/' })}>🚀 OpenInula Codegen</button>
      {currentSearchInput && (
        <h1 title={currentSearchInput.fileName ?? currentSearchInput.value} className="text-xl text-[#303030] w-[900px] border-2 border-[#f3f3f3] rounded-full p-2 overflow-hidden text-nowrap flex items-center">
          {currentSearchInput.type === 'image_url'
            ? (
              <>
                <span className="text-2xl mr-2">🖼</span>
                {`[${currentSearchInput.fileName}]`}
              </>
              )
            : (
              <>
                <span className="text-2xl mr-2">📝</span>
                {currentSearchInput.value}
              </>
              )}
        </h1>
      )}
      <div className="w-[320px]">
        <Button asChild className="mx-4 rounded-full ">
          <a href="https://atomgit.com/openinula-competition-2024/000067">
            <GithubIcon />
          </a>
        </Button>
      </div>
    </nav>
  )
}
